<template>
    <div class="con">
        <form action="/" class="sear">
            <van-search
                v-model="value"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="onCancel"
                class="search"
                @input="inputs"
                @focus="focust"
            />
        </form>
        <histor :value='value' v-if="flog" @values="vals"></histor>
        <result :value="value" v-else-if="tb"></result>
        <lishijulu v-else></lishijulu>
    </div>
</template>
<script>
import histor from './compon/histor.vue'
import result from './compon/result.vue'
import lishijulu from './compon/lishijulu.vue'
export default {
  data() {
    return {
      value: '',
      flog:false,
      lis:[],
      tb:false
    }
  },
  components:{
    histor,
    result,
    lishijulu
  },
  methods: {
    vals(val){
      this.value = val
      this.flog = false
      this.tb = true
    },
    onSearch(){
      this.flog = false
      this.tb = true
    },
    inputs(value){
      this.flog = true
      if (value.length === 0){
        this.flog = false
      }
      const ss = {
        id:value
      }
      // 历史记录一下
      this.lis.push(ss)
    },
    focust(){
      this.flog = true
      this.tb = false          
    },
    onCancel() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less">
  .con{
    .sear{
        .van-search__action{
          font-size: 28px;
          color: #ffffff;
      }
      .search{
        background: #3296fa;
      }
    }
  }
</style>
